<template>
    <div class="form">
        <h3>访客申请</h3>
        <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
            <el-form-item label="姓名" prop="name">
                <el-input class="input" v-model="form.name" placeholder="请输入访客姓名" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input class="input" v-model="form.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="身份" prop="identity">
                <el-input class="input" v-model="form.identity" placeholder="请输入身份" />
            </el-form-item>
            <el-form-item label="进入时间" prop="enterTime">
                <el-date-picker style="width:30vw;" v-model="form.enterTime" type="datetime" placeholder="请选择时间"
                    editable="false" :shortcuts="shortcuts" />
            </el-form-item>
            <el-form-item label="备注">
                <el-input class="input" v-model="form.season" type="textarea" show-word-limit maxlength="100" :rows="4"
                    placeholder="请输入内容"></el-input>
            </el-form-item>
        </el-form>
        <el-form class="btnGroup">
            <el-button size="large" :loading="loading" type="primary" @click="submitForm">确 定</el-button>
            <el-button size="large" @click="cancel">取 消</el-button>
        </el-form>
    </div>
</template>

<script setup name="guestAddRecord">
import { reactive } from 'vue';
import { ElNotification } from 'element-plus'
import { addGuestRecodeApi } from '@/api/guest'
const loading = ref(false);

const checkMobile = (rule, value, cb) => {
    const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
    if (regMobile.test(value)) {
        return cb()
    }
    cb(new Error('请输入正确的手机号'))
}


const data = reactive({
    form: {
        name: '',
        phone: '',
        identity: '',
        enterTime: '',
        season: ''
    },
    rules: {
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }, {
            validator: checkMobile,
            trigger: 'blur'
        }],
        identity: [{ required: true, message: "身份不能为空", trigger: "blur" }],
        enterTime: [{ required: true, message: "进入时间不能为空", trigger: "blur" }]
    },
});

const { form, rules } = toRefs(data);

const shortcuts = reactive([
    {
        text: '今天',
        value: new Date(),
    },
    {
        text: '明天',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            return date
        },
    },
    {
        text: '一周后',
        value: () => {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
            return date
        },
    },
])

const { proxy } = getCurrentInstance();
/** 提交按钮 */
const submitForm = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            loading.value = true
            addGuestRecodeApi(form.value).then(res => {
                if (res.code == 200) {
                    ElNotification({
                        title: '提示',
                        message: '添加成功',
                        type: 'success'
                    })
                    loading.value = false
                    proxy.resetForm("formRef")
                    form.value.season = ""
                }
            });
        }
    });
}

const cancel = () => {
    proxy.resetForm("formRef");
}
</script>
<style lang='scss' scoped>
.form {
    margin-top: 4vh;
    width: 40vw;

    .input {
        width: 30vw;
    }

    .btnGroup {
        display: flex;
        justify-content: space-evenly;
    }
}

.form>h3 {
    text-align: center;
}
</style>

